<template>
  <div class="chart-container demo-spin-col">
    <h1 class="title">内存使用率</h1>
    <div :id="myChartTwoId" class="default-chart">
    </div>
    <table class="table table-0" v-show="!loadingShow">
      <tr>
        <th></th>
        <th>最新</th>
        <th>最小</th>
        <th>平均</th>
        <th>最大</th>
      </tr>
    </table>
    <table class="table" v-show="!loadingShow">
      <tr v-for="(item,index) in tableArr" :key="index">
        <td>{{ item.title}}</td>
        <td>{{ item.newest}}%</td>
        <td>{{ item.minimum}}%</td>
        <td>{{ item.average}}%</td>
        <td>{{ item.maximum}}%</td>
      </tr>
    </table>
    <Spin fix v-if="loadingShow">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>Loading</div>
    </Spin>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts')
  // 引入折线图
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')

  export default {
    name: "LineChartTwo",
    props:[
      'twoId',
      'hostId',
      'currentItemIndex'
      // 'LineTwoDatas'
    ],
    data() {
      return {
        interval:null,
        memory:[],
        myChartTwoId: 'myChartTwo'+this.twoId,
        tableArr: [
          {
            title: '内存使用率',
            data:[],
            newest: '0',
            minimum: '0',
            average: '0',
            maximum: '0'
          }
        ],
        theChart:null,
        currentMemory:0,
        options:{
          title: {
            show: false,
            text: '内存使用率',
            x: 'left',
            y: 'top',

            textStyle: {
              color: '#ffffff',
              fontStyle: 'bold',
              fontSize: 20,
              verticalAlign: 'bottom'
            }
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.4)',  //鼠标移动到图上面时，背景色
            padding: 2,     //定义内边距
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: [],
            scale :false,
            splitNumber:20,
            //x轴的字体样式
            axisLabel: {
              show: true,
              // interval:0,
              rotate:45,
              textStyle: {
                color: '#08a9ae',
                fontSize: '12'
              }
            },
            // 控制网格线是否显示
            splitLine: {
              show: true,
              //  改变轴线颜色
              lineStyle: {
                color: ['#21475d'],
                width: 1,
                type: 'solid'
              }
            },
            // x轴的颜色和宽度
            axisLine: {
              show: true, //隐藏坐标轴
              lineStyle: {
                color: '#eeeeee',
                width: 1,   //这里是坐标轴的宽度,可以去掉
              }
            },
            // 去除坐标轴上的刻度线
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            name: '',
            min: '0',
            max: '100',
            splitNumber: 5,
            axisTick:{
              interval:10
            },
            axisLabel: {
              //设置y轴数值为%
              formatter: '{value} %',
              show: true,
              textStyle: {
                color: '#263f6d'
              }
            },
            // y轴的颜色和宽度
            axisLine: {
              show: true,
              lineStyle: {
                color: '#eeeeee',
                width: 1,   //这里是坐标轴的宽度
              }
            },
            splitLine: {
              show: false,
              //  改变轴线颜色
              lineStyle: {
                color: ['#21475d'],
                width: 1,
                type: 'solid'
              }
            },
          },
          grid: { //控制图的大小
            top: 10,
            x: 40,
            x2: 30,
            y2: 30
          },
          series: [{
            data: [],
            type: 'line',
            // smooth: true,
            radius: '0',
            center: ['0%', '0%'],
            symbolSize: 6,   //拐点圆的大小
            color: ['#0b97c2'],  //折线条的颜色
            itemStyle: {
              normal: {
                color: '#0b97c2',
                lineStyle: {
                  color: '#0b97c2'
                }
              }
            },
            areaStyle: {
              // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#036a6d' // 0% 处的颜色
                },{
                  offset: 0.5, color: '#0a8688' // 0% 处的颜色
                }, {
                  offset: 1, color: '#083132' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            }
          }]
        },
        showPointsNum:10,
        loadingShow:true
      }
    },
    // watch: {
    //   'LineTwoDatas':function(nv,ov){
    //     if(nv){
    //       console.log('nv>>>',nv)
    //       console.log(this)
    //       this.getM()
    //     }else{
    //       console.log('ov>>>',ov)
    //     }
    //   }
    // },
    mounted() {
      var date = new Date()
      var _this=this;
      setTimeout(()=>{
        this.drawLine();
        this.getMemory();
      },0)
      this.interval=setInterval(()=>{
        _this.getMemory();
      },60000)
      // console.log(Math.floor(Math.random() * 256));
    },
    destroyed () {
      clearInterval(this.interval);
    },
    methods: {
      drawLine() {
        var _this=this;
        // 基于准备好的dom，初始化echarts实例
        this.theChart = echarts.init(document.getElementById(this.myChartTwoId))
        // 绘制图表
        this.theChart.setOption(this.options);
      },
      getDatas(obj){
        var _this=this;
        var data={
          "jsonrpc": "2.0",
          "method": "item.get",
          "params": {
              "output": "extend",
              "hostids": this.hostId,
              "search": obj,
              "sortfield": "name"
          },
          "auth": localStorage.getItem('auth'),
          "id": localStorage.getItem('currentId')
        }
        return new Promise((resolve,reject)=>{
          _this.$http.post('/zabbix/api_jsonrpc.php',data).then(
            res=>{
              resolve(res.result);
            },
            err=>{
              reject('获取数据失败，请检查网络状况，或稍后刷新页面..')
            }
          )
        })
      },
      // getM(){
      //   var _this=this;
      //   // var res=await this.getDatas({"key_":"memory"});
      //   // console.log('"key_":"memory">>>',res)
      //   _this.memory=[]
      //   // res.forEach(v=>{
      //   this.LineTwoDatas.forEach(v=>{
      //     _this.memory.push({
      //       name:v.name,
      //       value:v.lastvalue
      //     })
      //   })
      //   //_this.memory[0].value为当前内存使用    _this.memory[1].value为总共内存
      //   if(_this.memory[1].value=='0'){
      //     _this.currentMemory=0
      //   }else{
      //     _this.currentMemory=parseInt((_this.memory[0].value/_this.memory[1].value)*100);
      //   }
      //   //修改vuex state memeryTotalArray对应值
      //   let obj={'index':_this.currentItemIndex,'value':_this.currentMemory}
      //   _this.$store.commit("memortyTotalChange",obj);
      //   if(_this.options.series[0].data.length<_this.showPointsNum){
      //     _this.options.series[0].data.push(_this.currentMemory);
      //   }else{
      //     _this.options.series[0].data.shift();
      //     _this.options.series[0].data.push(_this.currentMemory);
      //   }

      //   // console.log('_this.tableArr.data>>>',_this.tableArr[0].data)
      //   if(_this.tableArr[0].data.length<_this.showPointsNum){
      //     _this.tableArr[0].data.push(_this.currentMemory);
      //     _this.tableArr[0].newest=_this.currentMemory;
      //     _this.tableArr[0].minimum=_this.tableArr[0].data.sort()[0];
      //     _this.tableArr[0].maximum=_this.tableArr[0].data[_this.tableArr[0].data.length-1];
      //     var total=0;
      //     _this.tableArr[0].data.forEach(v=>{
      //       total+=v;
      //     })
      //     _this.tableArr[0].average=(total/_this.tableArr[0].data.length).toFixed(2);
      //   }else{
      //     _this.tableArr[0].data.shift();
      //     _this.tableArr[0].data.push(_this.currentMemory);
      //     _this.tableArr[0].newest=_this.currentMemory;
      //     _this.tableArr[0].minimum=_this.tableArr[0].data.sort()[0];
      //     _this.tableArr[0].maximum=_this.tableArr[0].data[_this.tableArr[0].data.length-1];
      //     var total=0;
      //     _this.tableArr[0].data.forEach(v=>{
      //       total+=v;
      //     })
      //     _this.tableArr[0].average=(total/_this.tableArr[0].data.length).toFixed(2);
      //   }

      //   var date=new Date()
      //   var h=date.getHours();
      //   var m=date.getMinutes();
      //   if(m<10){
      //     m='0'+m;
      //   }
      //   var time=h+":"+m;
      //   if(_this.options.xAxis.data.length<_this.showPointsNum){
      //     _this.options.xAxis.data.push(time)
      //   }else{
      //     _this.options.xAxis.data.shift();
      //     _this.options.xAxis.data.push(time)
      //   }
      //   _this.theChart.setOption(_this.options);

      //     this.loadingShow=false;
      // },
      async getMemory(){
        var _this=this;
        var res=await this.getDatas({"key_":"memory"});
        // console.log('"key_":"memory">>>',res)
        _this.memory=[]
        console.log(res)
        res.forEach(v=>{
          _this.memory.push({
            name:v.name,
            value:v.lastvalue
          })
        })
        console.log(_this.memory)
        //_this.memory[0].value为当前内存使用    _this.memory[1].value为总共内存
        if(_this.memory[1].value=='0'){
          _this.currentMemory=0
        }else{
          _this.currentMemory=parseInt(_this.memory[1].value);
        }
        //修改vuex state memeryTotalArray对应值
        let obj={'index':_this.currentItemIndex,'value':_this.currentMemory}
        _this.$store.commit("memortyTotalChange",obj);
        if(_this.options.series[0].data.length<_this.showPointsNum){
          _this.options.series[0].data.push(_this.currentMemory);
        }else{
          _this.options.series[0].data.shift();
          _this.options.series[0].data.push(_this.currentMemory);
        }

        // console.log('_this.tableArr.data>>>',_this.tableArr[0].data)
        if(_this.tableArr[0].data.length<_this.showPointsNum){
          _this.tableArr[0].data.push(_this.currentMemory);
          _this.tableArr[0].newest=_this.currentMemory;
          _this.tableArr[0].minimum=_this.tableArr[0].data.sort()[0];
          _this.tableArr[0].maximum=_this.tableArr[0].data[_this.tableArr[0].data.length-1];
          var total=0;
          _this.tableArr[0].data.forEach(v=>{
            total+=v;
          })
          _this.tableArr[0].average=(total/_this.tableArr[0].data.length).toFixed(2);
        }else{
          _this.tableArr[0].data.shift();
          _this.tableArr[0].data.push(_this.currentMemory);
          _this.tableArr[0].newest=_this.currentMemory;
          _this.tableArr[0].minimum=_this.tableArr[0].data.sort()[0];
          _this.tableArr[0].maximum=_this.tableArr[0].data[_this.tableArr[0].data.length-1];
          var total=0;
          _this.tableArr[0].data.forEach(v=>{
            total+=v;
          })
          _this.tableArr[0].average=(total/_this.tableArr[0].data.length).toFixed(2);
        }

        var date=new Date()
        var h=date.getHours();
        var m=date.getMinutes();
        if(m<10){
          m='0'+m;
        }
        var time=h+":"+m;
        if(_this.options.xAxis.data.length<_this.showPointsNum){
          _this.options.xAxis.data.push(time)
        }else{
          _this.options.xAxis.data.shift();
          _this.options.xAxis.data.push(time)
        }
        _this.theChart.setOption(_this.options);

          this.loadingShow=false;
      }
    }
  }
</script>

<style scoped lang="scss">
  .chart-container {
    color: #ffffff;
    width: 500px;
    height: 227px;
    border: 28px solid;
    border-top: 5px solid;
    border-right: 5px solid;
    /*border-left: 5px solid;*/
    /*border-bottom: 5px solid;*/
    background: transparent;
    border-image: url('../assets/images/31.png') 28 fill repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;


    .title {
      color: #fff;
      width: 20px;
      font-size: 16px;
      word-wrap: break-word;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .default-chart {
      width: 100%;
      flex:1;
      padding-right: 20px;
      /*position: absolute;*/
      /*right: 30px;*/
      /*top: 0;*/
    }

    table {
      width: 100%;
      padding: 0 20px;
      /*position: absolute;*/
      /*top: 140px;*/
      /*left: 0;*/
      color: #08a9ae;
      text-align: center;
      line-height: 14px;

      tr {
        th,td {
          width: 60px;
          &:nth-child(1){
            width: 120px;
          }
        }
      }
    }
  }
  /*加载中的作用范围*/
.demo-spin-col{
  position: relative;
}
.ivu-spin-fix{
  background-color: rgba(0, 0, 0, .2);
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
</style>
